{% extends 'sims/base.html' %}
{% load static %}

{% block title %}
    个人中心
{% endblock %}

{% block description %}
    个人中心
{% endblock %}

{% block navbar_top %}
    <a class="nav-item nav-link active" href="{% url 'sims:schedule' %}">个人中心</a>
{% endblock %}

{% block body_content %}

    <!-- 修改密码 -->
    <div class="modal fade" id="editor_psw" tabindex="-100" role="dialog" aria-labelledby="editor_pswLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col">
                            <h5 class="text-center" id="editor_pswLabel">修改密码
                                <button type="button" class="close float-right"
                                        data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                            </h5>
                        </div>
                    </div>
                    <hr class="my-4">
                    <div class="row">
                        <div class="col">
                            <form action="/user_control/" method="POST">
                                {% csrf_token %}
                                <div class="form-group">
                                    {{ control_form.old_psw.label_tag }}
                                    {{ control_form.old_psw }}
                                </div>
                                <div class="form-group">
                                    {{ control_form.new_psw.label_tag }}
                                    {{ control_form.new_psw }}
                                    <small class="form-text text-muted">
                                        密码长度必须为6-18位, 包括大小写和数字, 不能出现空格\特殊字符\表情
                                    </small>
                                </div>
                                <div class="form-group">
                                    {{ control_form.new_psw_confirm.label_tag }}
                                    {{ control_form.new_psw_confirm }}
                                </div>
                                <button type="submit" class="btn btn-success btn-block">确认修改</button>
                            </form>
                        </div>
                    </div>
                    <h5 class="page-header" style="margin-top: 20px"></h5>
                </div>
            </div>
        </div>
    </div>
    <h5 class="page-header" style="margin-top: 20px"></h5>
    <div class="row">
        <div class="col px-0">
            <div class="card mb-3">
                <div class="card-header">
                    <h3>个人信息</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-7">
                            <div class="row">
                                <div class="col">
                                    <h3 class="text-center">查看并编辑你的信息!</h3>
                                </div>
                            </div>
                            <h5 class="page-header" style="margin-top: 70px"></h5>
                            {% if message_warn %}
                                <h5 class="page-header" style="margin-top: 20px"></h5>
                                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                    <strong>{{ message_warn }}</strong>
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                            {% elif message_success %}
                                <h5 class="page-header" style="margin-top: 20px"></h5>
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    <strong>{{ message_success }}</strong>
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                            {% endif %}
                            <div class="row shadow p-2 rounded">
                                <div class="col">
                                    <div class="row">
                                        <div class="col">
                                            <h4>基本信息</h4>
                                        </div>
                                    </div>
                                    <h5 class="page-header" style="margin-top: 20px"></h5>
                                    <div class="row">
                                        <div class="col-3">
                                            <p class="lead">用户名:</p>
                                        </div>
                                        <div class="col-9">
                                            <p class="lead">{{ user_item.user_name }}</p>
                                        </div>
                                    </div>
                                    <h5 class="page-header" style="margin-top: 10px"></h5>
                                    <div class="row">
                                        <div class="col-3">
                                            <p class="lead">注册时间:</p>
                                        </div>
                                        <div class="col-9">
                                            <p class="lead">{{ user_item.user_create_date }}</p>
                                        </div>
                                    </div>
                                    <h5 class="page-header" style="margin-top: 10px"></h5>
                                    <div class="row">
                                        <div class="col-3">
                                            <p class="lead">密码:</p>
                                        </div>
                                        <div class="col-9">
                                            <button type="button" class="btn btn-outline-success"
                                                    data-toggle="modal"
                                                    data-target="#editor_psw">更改密码
                                            </button>
                                        </div>
                                    </div>
                                    <h5 class="page-header" style="margin-top: 10px"></h5>
                                    <div class="row">
                                        <div class="col-3">
                                            <p class="lead">真实姓名:</p>
                                        </div>
                                        <div class="col-9">
                                            {% if user_item.user_real_name == "" %}
                                                <form action="/user_control/" method="POST">
                                                    {% csrf_token %}
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text" id="addon-wrapping">@</span>
                                                        </div>
                                                        {#                                                        <input type="text" class="form-control"#}
                                                        {#                                                               placeholder=""#}
                                                        {#                                                               aria-label=""#}
                                                        {#                                                               aria-describedby="basic-addon2">#}
                                                        {{ user_central_form.real_name }}
                                                        <div class="input-group-append">
                                                            <button class="btn btn-outline-success" type="submit">
                                                                设置姓名
                                                            </button>
                                                        </div>
                                                    </div>
                                                </form>
                                            {% else %}
                                                <p class="lead">{{ user_item.user_real_name }}</p>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h5 class="page-header" style="margin-top: 60px"></h5>
                            <div class="row shadow p-2 rounded">
                                <div class="col">
                                    <div class="row">
                                        <div class="col">
                                            <h4>用户统计</h4>
                                        </div>
                                    </div>
                                    <h5 class="page-header" style="margin-top: 20px"></h5>
                                    <div class="row">
                                        <div class="col-4">
                                            <p class="lead">创建的日程个数:</p>
                                        </div>
                                        <div class="col-8">
                                            <p class="lead">{{ user_item.thing_all }}</p>
                                        </div>
                                    </div>
                                    <h5 class="page-header" style="margin-top: 10px"></h5>
                                    <div class="row">
                                        <div class="col-4">
                                            <p class="lead">完成的日程个数:</p>
                                        </div>
                                        <div class="col-8">
                                            <p class="lead">{{ user_item.thing_finished }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h5 class="page-header" style="margin-top: 60px"></h5>
                            <div class="row shadow p-2 rounded">
                                <div class="col">
                                    <div class="row">
                                        <div class="col">
                                            <h4>电子邮件</h4>
                                        </div>
                                    </div>
                                    <h5 class="page-header" style="margin-top: 20px"></h5>
                                    <div class="row">
                                        <div class="col-3">
                                            <p class="lead">电子邮件:</p>
                                        </div>
                                        <div class="col-9">
                                            <p class="lead">{{ user_item.user_email }}</p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <button type="button" class="btn btn-outline-success"
                                                    data-toggle="modal"
                                                    data-target="">设置电子邮件地址
                                            </button>
                                            <br>
                                            <small>电子邮件地址是选填项，但是当您忘记您的密码要重置密码时，需要该信息。您也可以选择让
                                                其他用户通过您的用户或讨论页面上的链接用电子邮件联系您。其他用户联系您时您的电子邮件地
                                                址不会显示。</small>
                                        </div>
                                    </div>
                                    <h5 class="page-header" style="margin-top: 15px"></h5>
                                    <div class="row">
                                        <div class="col-3">
                                            <p class="lead">电子邮件确认:</p>
                                        </div>
                                        <div class="col-9">
                                            <p class="lead">{{ user_item.user_email }}</p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <button type="button" class="btn btn-outline-success"
                                                    data-toggle="modal"
                                                    data-target="">指定一个电子邮件地址以使用此功能
                                            </button>
                                            <br>
                                            <small>该电子邮件地址将用来接受电子邮件</small>
                                        </div>
                                    </div>
                                    <h5 class="page-header" style="margin-top: 10px"></h5>
                                </div>
                            </div>

                        </div>
                        <div class="col-5">
                            <div class="jumbotron">
                                <h1 class="display-4">感谢您的使用与支持！</h1>
                                <hr class="my-4">
                                <p class="lead">目前, 您已使用本站:</p>
                                <p class="lead text-center">创建</p>
                                <h1 class="display-4 text-center">{{ user_item.thing_all }}</h1>
                                <p class="lead text-center">完成</p>
                                <h1 class="display-4 text-center">{{ user_item.thing_finished }}</h1>
                                <p class="lead">
                                    <a class="btn btn-primary btn-lg" href="{% url 'sims:index' %}"
                                       role="button">了解更多</a>
                                </p>
                                <img src="{% static 'images/image1.jpg' %}" class="img-fluid" alt="Responsive image">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block navbar_left %}
    <div class="navbar-nav">
        <a class="nav-item nav-link" href="{% url 'sims:index' %}">主页</a>
        <a class="nav-item nav-link" href="{% url 'sims:schedule' %}">日程安排</a>
        <a class="nav-item nav-link" href="{% url 'sims:to_do' %}">待办事项</a>
        <a class="nav-item nav-link" href="{% url 'sims:history' %}">历史活动</a>
        <a class="nav-item nav-link active" href="{% url 'sims:user_control' %}">个人中心</a>
    </div>
{% endblock %}